<template>
  <div>
    <div v-if="classEvaluation.CommentItems.length > 0">
      <div class="evaluate-top">
        <span>好评率{{ classEvaluation.Rate }}</span>
        <span>{{ classEvaluation.AllCommentNum }}条评论</span>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="— 没有更多了 —"
        loading-text="努力加载中"
        :offset="10"
        class="evaluate-list"
        @load="getClassEvaluation"
      >
        <div
          v-for="(item,index) in classEvaluation.CommentItems"
          :key="index"
          class="evaluate-item"
        >
          <Avatar
            :src="item.UserImg"
            class="user-img"
          />
          <div class="user-evaluate">
            <div class="user-evaluate-top">
              <div class="user-info">
                <div class="user-name">
                  {{ item.UserName }}
                </div>
                <div class="comment-time">
                  {{ item.CommentTime }}
                </div>
              </div>
              <div>
                <img
                  v-for="Star in item.CommentStars"
                  :key="Star"
                  src="~assets/class/star.png"
                  class="evaluate-star"
                >
              </div>
            </div>
            <div
              v-if="item.CommentContent === ''"
              class="evaluate-content"
            >
              五星好评~
            </div>
            <div
              v-else
              class="evaluate-content"
            >
              {{ item.CommentContent }}
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div
      v-if="classEvaluation.CommentItems.length <= 0 && finished"
      class="no-data"
    >
      <img
        src="~assets/class/no_data.png"
        class="no-data-img"
      >
      <div>暂时还没有学员评价</div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    Avatar: () => import(/* webpackChunkName: "publicComp" */ 'components/Mine/Avatar.vue'),
  },
  data () {
    return {
      type: 0,
      page: 1,
      classEvaluation: {
        Rate: '',
        CommentItems: [],
      },
      loading: true,
      finished: false,
    }
  },
  created () {
    this.getClassEvaluation()
  },
  methods: {
    // 获取评价内容
    getClassEvaluation () {
      this.$axios({
        url: 'evaluation/getClassEvaluationForWeb',
        data: {
          ClassId: this.$route.query.classId,
          type: this.type,
          page: this.page,
          pageSize: 6,
        },
      }).then(res => {
        if (this.page === 1) {
          this.classEvaluation = res
        } else {
          this.$set(this.$data.classEvaluation, 'CommentItems',
            [...this.classEvaluation.CommentItems, ...res.CommentItems])
        }
        console.log('获取评价内容-----', this.classEvaluation)
        if (!res.AllCommentNum) {
          this.classEvaluation.Rate = '100%'
        }
        this.loading = false
        if (this.page <= res.TotalPage) {
          this.page++
        } else {
          this.finished = true
        }
      })
    },
  },
})
</script>
<style lang="scss" scoped>
.evaluate-top {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24px;
  color: #333;
  padding: 0 24px;
  background-color: #fff;
  @include px1border(bottom, #E9E9E9)
}
.evaluate-item {
  padding: 30px 24px 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}
.user-img {
  width: 76px !important;
  height: 76px !important;
}
.user-evaluate {
  width: calc(100% - 76px);
  margin-left: 26px;
}
.user-evaluate-top {
  display: flex;
  justify-content: space-between;
}
.user-name {
  font-size: 30px;
  color: #333;
  padding-top: 8px;
  margin-bottom: 18px;
}
.comment-time {
  font-size: 24px;
  color: #A4A9B2;
}
.evaluate-star {
  width: 27px;
  height: 26px;
  margin-right: 8px;
}
.evaluate-content {
  font-size: 28px;
  color: #4B515E;
  margin-top: 30px;
}
.no-data {
  font-size: 32px;
  padding-top: 50px;
  text-align: center;
}
.no-data-img {
  width: 150px;
  margin-bottom: 20px;
}
</style>
